<style lang="less" scoped>
    .pub_tit {width: 200px; padding-top: 0.23rem;  margin: 0 auto 0.4rem; font-size: .28rem; text-align: center; font-weight: bold;}
    .theme_wrap {
      padding: .36rem 0.4rem; background-color: #fff;
      .tit {.pub_tit; background: url("/static/images/tit_time.png") no-repeat center top; background-size: 1.9rem;}
      .meun_wrap {
        ul {overflow: hidden; margin: 0 auto;}
        li {float: left; width: 0.9rem; margin-left: 0.53rem; height: 1rem;}
        li:nth-child(1) {margin-left: 0;}
        img {width: 0.7rem; height: 0.66rem; margin: 0 auto;}
        p {text-align: center; font-size: 0.24rem; color: #333;}
      }
    }
    .the_main_wrap {
      margin: 0.12rem 0; min-height: 2.4rem;
      img {width: 100%;}
    }
    .hot_wrap {
      background-color: #fff; padding: .36rem 0.3rem 1.1rem;
      .tit {
        .pub_tit;
        background: url("/static/images/tit_hot.png") no-repeat center top; background-size: 1.56rem;
      }
      .mdse_wrap {overflow: hidden;}
    }
</style>
<template>
  <div class="wrap">
    <SearchItem ins='home'></SearchItem>
    <yd-slider autoplay="40000" speed="300" :showPagination="false">
      <yd-slider-item v-for="(banner, index) in banners" :key="index">
          <a :href="banner.targetUrl"><img style="height: 3.82rem;" :src="banner.imgUrl"></a>
      </yd-slider-item>
    </yd-slider>
    <div class="theme_wrap">
      <h2 class="tit">商品主题</h2>
      <div class="meun_wrap">
        <ul>
          <li v-for="menu in menus">
            <img :src="menu.imgUrl"></img>
            <p>{{menu.text}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="the_main_wrap"><img src="/static/images/tuiju.png"></div>
    <div class="hot_wrap">
      <h2 class="tit"><router-link to="/MdseList">推荐商品</router-link></h2>
      <div class="mdse_wrap">
        <ul>
          <MdseItem></MdseItem>
          <MdseItem></MdseItem>
          <MdseItem></MdseItem>
          <MdseItem></MdseItem>
          <MdseItem></MdseItem>
          <MdseItem></MdseItem>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import MdseItem from '../Common/MdseItem'
import SearchItem from '../Common/SearchItem'
export default {
  components: { MdseItem, SearchItem },
  data() {
    return {
      banners: [
        {
          targetUrl: '',
          imgUrl: '/static/images/banner.png',
        },
        {
          targetUrl: '',
          imgUrl: 'http://static.ydcss.com/uploads/ydui/2.jpg',
        },
        {
          targetUrl: '',
          imgUrl: 'http://static.ydcss.com/uploads/ydui/3.jpg',
        }
      ],
      menus: [
        {
          text: '钻石',
          targetUrl: '',
          imgUrl: '/static/images/menu_zs.png'
        },
        {
          text: '戒指',
          targetUrl: '',
          imgUrl: '/static/images/menu_jz.png'
        },
        {
          text: '吊坠',
          targetUrl: '',
          imgUrl: '/static/images/menu_dz.png'
        },
        {
          text: '耳环',
          targetUrl: '',
          imgUrl: '/static/images/menu_eh.png'
        },
        {
          text: '更多',
          targetUrl: '',
          imgUrl: '/static/images/menu_other.png'
        }

      ]
    }
  }
}
</script>
